<template>
    <div class="component-left-menu">
        <div class="item" :class="{active: activePath === item.path}" :key="key" @click="to(item)" v-for="(item, key) in menuData">
			<i class="iconfont" :class="item.icon"></i>
            <span>{{item.name}}</span>
        </div>
    </div>
</template>

<script lang="ts">
import './index.less'

import {
	Component, Vue, Watch
} from 'vue-property-decorator'

interface MenuData {
	name: string;
	path: string;
	key: string;
	icon: string;
}

@Component({})
export default class LeftMenu extends Vue {
	private activePath = '/';

	private to (item: MenuData) {
		if (item.path === this.activePath) return
		this.$router.push(item.path)
	}

	private menuData: (MenuData)[] = [
		{ name: '首页', path: '/', key: 'home', icon: 'icon-shouye' },
		{ name: '模型', path: '/model', key: 'modelLists', icon: 'icon-biaodan' },
		{ name: '表单', path: '/t1', key: 'home', icon: 'icon-biaoge' },
		{ name: '字典', path: '/t2', key: 'home', icon: 'icon-dictionary' },
		{ name: '接口', path: '/t3', key: 'home', icon: 'icon-api' },
		{ name: '图表', path: '/t4', key: 'home', icon: 'icon-tubiaotongji' },
		{ name: '服务', path: '/t5', key: 'home', icon: 'icon-frequency' },
		{ name: '流程', path: '/t6', key: 'home', icon: 'icon-liuchengguanli-' },
		{ name: '监控', path: '/t7', key: 'home', icon: 'icon-frequency' },
		{ name: '设置', path: '/t8', key: 'home', icon: 'icon-peizhi' }
	]

	@Watch('$route', { immediate: true })
	onChangeValue () {
		this.activePath = this.$route.path
	}
}

</script>
